<template>
  <a-card  style="width: 100%;position: sticky;top: 80px;margin-bottom: 20px" hoverable >
    <template #cover>
      <div
          :style="{borderRadius:'5px 5px 0 0', height:'200px', backgroundImage: 'linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.5)),url(' + useInfoForm.avatar + ')', 'background-repeat':'no-repeat', backgroundSize:'cover',backgroundPosition:'center center'}"
      ></div>
    </template>
    <a-card-meta :title="useInfoForm.nickName" :description="useInfoForm.sign">
      <template #avatar>
        <a-avatar :size="50" :src="useInfoForm.avatar" />
      </template>
    </a-card-meta>
    <a-row style="text-align: center;margin-top: 15px">
      <a-col :span="8">
        <a-statistic title="关注"  value-style="font-size: 16px;"  :value="articleInfo.followNum"  />
      </a-col>
      <a-col :span="8">
        <a-statistic title="粉丝" value-style="font-size: 16px;" :value="articleInfo.fansNum" />
      </a-col>
      <a-col :span="8">
        <a-statistic  title="文章"  value-style="font-size: 16px;" :value="articleInfo.articleNum" />
      </a-col>
    </a-row>
  </a-card>
</template>

<script setup lang="ts">
//个人卡片
import useStore from "@/store";
import {ref, UnwrapRef} from "vue";
import * as userApi from "@/api/user";
import {getArticleInfo} from "@/api/article";

const prop = defineProps({
  userId:{
    type:String,
    default:''
  }
})
onMounted( () => {
  userId.value =  useRoute().params.userId as string
  const uid = userId.value || prop.userId
  userApi.getUserInfo(uid as string).then(res => {
    Object.assign(useInfoForm, res.data);
  })
  getArticleInfo(uid as string).then(res => {
    Object.assign(articleInfo, res.data);
  })

})
interface FormState {
  nickName: string;
  sex: number;
  sign: string;
  avatar: string;
  background: string;
}
const useInfoForm: UnwrapRef<FormState> = reactive({
  nickName: '',
  sex: 0,
  sign: '',
  avatar: '',
  background: '',
});
const articleInfo = reactive({
  articleNum: 0,
  fansNum: 0,
  followNum: 0
});
const {user} =  useStore();
const userId = ref<String>('')

</script>

<style scoped>

</style>
